<template>
   <fw_header @update:page=CompControl.fw_header.handleRecivePage /> 
  <div id="router-viewer">
    <view_cropper v-if="CompControl.fw_header.page == 0" />
    <view_about v-if="CompControl.fw_header.page == 1" />
  </div>
  <fw_footer /> 

</template>

<script setup>
import { reactive, ref, watch, onBeforeMount, onMounted } from "vue";
import fw_header from "@/components/header.vue";
import fw_footer from "@/components/footer.vue";
import view_about from '@/views/about/about.vue';
import view_cropper from "@/views/cropper/cropper.vue"

const CompControl = reactive({
  fw_header: {
    page: 0,
    handleRecivePage: (event) => {
      CompControl.fw_header.page = event

    },
    handleReceiveReturns: () => {
      //
    }
  },
  fw_footer: {

  }
})

</script>

<style scoped lang="scss">
#router-viewer{
  //margin-top: var(--framework-header-height);
  min-height: calc(100vh - var(--framework-header-height));
}

</style>
